<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<link rel="stylesheet" media="screen" type="text/css"
	href="styles/1CssMaster.css" />

<link rel="stylesheet" media="screen" type="text/css"
	href="styles/tableau.css" />

<!-- //////////////////////////////////////////////////////////Style et JS dataPickers /////////////////////////////////////////////////////// -->
<link rel="stylesheet" href="styles/jquery-ui-1.10.2.custom.css" />
<script src="jsMairie/jquery-1.9.1.js"></script>
<script src="jsMairie/jquery-ui-1.10.2.custom.js"></script>
<script src="jsMairie/DataPicker.js"></script>


<!-- <script type="text/javascript" src="path_to/jquery.js"></script> -->
<!-- ///////////////////////////////////////////////////////////////////pagination////////////////////////////////////////////////////////////// -->
<script type="text/javascript" src="jsMairie/jquery.simplePagination.js"></script>

<link type="text/css" rel="stylesheet"
	href="styles/simplePagination.css" />

<!-- //////////////////////////////////////////////////////////fin dataPicker /////////////////////////////////////////////////////// -->

<title>Pointage</title>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.scrollingPagination.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#example').dataTable({
			"sPaginationType" : "scrolling"
		});
	});
</script>
<!-- /////////////////////////////////////////////style////////////////////////////////////////////////////////-->
<style type="text/css">
#divRecherche {
	float: left;
	width: 90%;
	margin-top: 30px;
	padding-left: 15px;
	margin-left: 10px;
	font-size: 22px;
}

fieldset {
	border: 1px solid #ACC3FF;
	border-radius: 10px 10px 10px 10px;
}

.tdRech {
	padding-right: 35px;
}

.checkAbs {
	text-align: center;
}
</style>
</head>


<h:body>
	<div id="headerDroite">
		<h:form>
			<h:panelGrid columns="2">
				<h:outputText style="center:left" value="#{mbConnexion.leLogin}" />
				<h:commandButton value="Déconnexion"
					action="#{mbConnexion.deconnexion}" />
				<h:outputText style="center:left" />
				<h:outputText style="center:left" />
			</h:panelGrid>
		</h:form>
	</div>
	<div id="divTitre">
		<h1 id="nomLogiciel">Gepeto</h1>
		<img alt="" src="../../mairie/imagesGepeto/plumeSansFond.png"
			width="80px" height="80px" />

	</div>

	<div id="divMenuHaut">

		<ul id="ulMenuHaut">

			<li class="liMenuHaut"><a href="ficheEnfant.xhtml">Dossier
					Enfant</a></li>
			<li class="liMenuHaut"><a href="inscription.xhtml">Inscription</a></li>
			<li class="liMenuHaut"><a href="pointage.xhtml">Pointage</a></li>
			<li class="liMenuHaut"><a href="factConsultation.xhtml">Facturation</a></li>
			<li class="liMenuHaut"><a href="editions.xhtml">Editions</a></li>
			<li class="liMenuHaut"><a href="personnel.xhtml">Personnel</a></li>
		</ul>
	</div>
	<!--///////////////////////////////////menu gauche ///////////////////-->
	<div id="divSousMenuGauche">

		<ul id="ulSousMenuGauche">
			<li class="liSousMenuGauche"><a href="pointage.xhtml">Pointer</a></li>
			<li class="liSousMenuGauche"><a href="pointageConsulter.xhtml">Consulter
					pointage</a></li>
		</ul>
	</div>
	<div id="centre">
		<h:form id="formulairePointage">
			<!-- 	///////////////////////////////////////////////label de l'élève///////////////////////////  -->
			<div id="divRecherche">
				<fieldset id="recherche">
					<legend>
						<b>Critères</b>
					</legend>

					<table>
						<tr>
							<td class="tdRech"><h:selectOneMenu id="selectEcole"
									value="#{beanPoint.idEcole}">
									<f:selectItem itemValue="1" itemLabel="prim.Georges-Cogniot" />
									<f:selectItem itemValue="2" itemLabel="prim.Fernand-Léger" />
									<f:selectItem itemValue="3" itemLabel="prim.Jean-Jaurès" />
									<f:selectItem itemValue="4" itemLabel="prim.Guy-Môquet" />
									<f:selectItem itemValue="5" itemLabel="prim.Paul-Bert" />
									<f:selectItem itemValue="6"
										itemLabel="prim.Paul-Vaillant-Couturier" />
									<f:selectItem itemValue="7" itemLabel="prim.Paul-Langevin" />
									<f:selectItem itemValue="8" itemLabel="prim.Henri-Barbusse" />
									<f:selectItem itemValue="9" itemLabel="mat.Georges-Cogniot" />
									<f:selectItem itemValue="10" itemLabel="mat.Fernand-Léger" />
									<f:selectItem itemValue="11" itemLabel="mat.Jean-Jaurès" />
									<f:selectItem itemValue="12" itemLabel="mat.Guy-Môquet" />
									<f:selectItem itemValue="13" itemLabel="mat.Paul-Bert" />
									<f:selectItem itemValue="14" itemLabel="mat.Paul-Langevin" />
									<f:selectItem itemValue="15" itemLabel="mat.Henri-Barbusse" />
								</h:selectOneMenu></td>
							<td class="tdRech"><h:selectOneMenu id="selectActivite"
									value="#{beanPoint.idActivite}">
									<f:selectItem itemValue="1" itemLabel="Accueil matin" />
									<f:selectItem itemValue="2" itemLabel="Cantine" />
									<f:selectItem itemValue="3" itemLabel="Accueil soir" />
								</h:selectOneMenu></td>

							<td class="tdRech"><h:inputText id="datepicker"
									class="datepicker" type="text" value="#{beanPoint.dateInscr}"
									onfocus="if (this.value== this.defaultValue) this.value=''" /></td>

							<td class="tdRech"><h:commandButton value="afficher"
									type="submit" action="#{beanPoint.chargementTablePointage}">
									<f:ajax execute="selectEcole selectActivite datepicker"
										render="tablePointage" />
								</h:commandButton></td>

						</tr>
					</table>
				</fieldset>
				<fieldset style="margin-top: 10px;">
					<legend>
						<b>Résultat</b>
					</legend>

					<div class="datagrid">
						<!-- 					<h:form> -->
						<h:dataTable id="tablePointage" value="#{beanPoint.listPoint}"
							var="p" styleClass="order-table" headerClass="order-table-header"
							rowClasses="order-table-odd-row,order-table-even-row">
							<!-- 							<tbody> -->
							<h:column>
								<f:facet name="header">Fiche Enfant</f:facet>
								<h:commandLink
									actionListener="#{beanEleveMairie.actionFromInscription}"
									value="voir fiche" action="ficheEnfant">
									<f:attribute name="NomEnfant" value="#{inscri.nomEnf}" />
									<f:attribute name="PrenomEnfant" value="#{inscri.prenomEnf}" />
								</h:commandLink>
							</h:column>
							<h:column>
								<f:facet name="header">ID</f:facet>
    							#{p.idEleve}
    						</h:column>
							
							<h:column>
								<f:facet name="header">Nom</f:facet>
    							#{p.nomEnf}
    						</h:column>

							<h:column>
								<f:facet name="header">Prenom</f:facet>
    							#{p.prenomEnf}
    						</h:column>

							<h:column>
								<f:facet name="header">Absent</f:facet>
								<h:selectBooleanCheckbox id="abs" value="#{p.absent}" />
							</h:column>

							<h:column>
								<f:facet name="header">Abs. justifiée</f:facet>
								<h:selectBooleanCheckbox id="absJustif" value="#{p.absenceJustif}" />
							</h:column>

							<h:column>
								<f:facet name="header">motif abs</f:facet>
								<h:inputText id="motifAbs" value="#{p.motifAbsence}" />
							</h:column>
							
							<h:column>
								<f:facet name="header">Valider</f:facet>
								<h:commandLink value="ok!"
										type="submit" action="#{beanPoint.effectuerPointage}">
										<f:ajax execute="abs absJustif motifAbs"></f:ajax>
								</h:commandLink>
							</h:column>

						</h:dataTable>


						<!-- 				</h:form> -->

					</div>
				</fieldset>

				<fieldset id="fieldSetAjout" style="margin-top: 10px;">
					<legend>
						<b>Ajout d'un enfant non inscrit</b>
					</legend>

					<!-- 					<form id="formAjout" method="post" action="" style="margin-left: 30%;">-->
					<table>
						<tr>
							<td class="tdRech"><input type="text" name="Nom"
								value="Entrer le nom d'un élève "></input></td>

							<td class="tdRech"><input id="Valider" type="submit"
								value="Ajouter l'élève" onclick="javascript:text()" /></td>
						</tr>
					</table>
					<!-- 					</form> -->
				</fieldset>

				

			</div>

		</h:form>


	</div>
</h:body>

</html>
